﻿
    var activeEmployee,
        curId = 0;

    function currentId() {
        var res = curId;
        curId++;
        return res;
    }

    function valOrDefault(dict, param, _default) {
        if (dict != null && typeof dict != 'undefined' && param in dict)
            return dict[param];
        return _default;
    }

    function Employee(emObject, id) {
        this.id = id;
        this.userId = valOrDefault(emObject, 'userId', '');
        this.userName = valOrDefault(emObject, 'userName', '');
        this.userPosition = valOrDefault(emObject, 'userPosition', '');
        this.renderToHtml = function() {
            var url = '@Url.Content("~/Content/images/community/arrow.png")';
            var html = '<div class="employee-row"> \
                           <input type="hidden" name="task_workers" value="' + this.userId  + '"/> \
                           <span>' + this.userName + '</span> \
                           <span>' + this.userPosition + '</span> \
                           <a href="javascript:;" class="btn btn-danger" onclick="activeEmployee.deleteEmployee(' + this.id + ');">X</a> \
                        </div>';
            return html;
        };
        this.equal = function(obj) {
            return this.userId == obj.userId;
        };
    }

    function ActiveEmployee(emObject) {
        self = this;
        this.employee = {};
        @foreach (var tw in Model.TaskWorkers)
        {
            <text>
                id = currentId();
                this.employee[id] = new Employee({
                    'userId': @tw.Id,
                    'userName': @tw.FullName,
                    'userPosition': @tw.Position
                }, id);
            
            </text>
        }
        
        curId = this.employee.length;
        if(typeof curId == 'undefined') curId = 0;
        function isExisted(employee) {
            var res = false;
            for(var i in self.employee) {
                if(employee.equal(self.employee[i])) {
                    res = true;
                    break;
                }
            }
            return res;
        };
        
        this.renderToHtml = function () {
            var html = '';
            for (var i in this.employee) {
                html += '<li id="em-container-' + this.employee[i].id + '">' + this.employee[i].renderToHtml() + '</li>';
            }
            return html;
        };

        this.addEmployee = function(obj) {
            var em = new Employee(obj, currentId());
            if(isExisted(em)) {
                alert("This employee is existed!");
            } else {
                this.employee[em.id] = em;
                $('#employee-list').append('<li id="em-container-' + em.id + '">' + em.renderToHtml() + '</li>');    
            }
                
        };

        this.deleteEmployee = function(id) {
            if(id in this.employee) {
                $('#employee-list li#em-container-' + id).remove();
                delete this.employee[id];
            }
        };

        this.init = function() {
            $('#employee-list').html(activeEmployee.renderToHtml());
        };
    }

    activeEmployee = new ActiveEmployee();
    

    function addEmployee() {
        var srcLangObj = '#worker-selector option:selected';
        activeEmployee.addEmployee({
            'userId': $(srcLangObj).val(),
            'userName': $(srcLangObj).attr('uname'),
            'userPosition': $(srcLangObj).attr('position')
        });
    }

    $(document).ready(function () {

        $('.task-form-common dl input, \
           .task-form-common dl textarea').focusin(function () {
            $(this)
                .parents('dl')
                .addClass('ui-state-highlight');
        });

        $('.task-form-common dl input, \
           .task-form-common dl textarea').focusout(function () {
            $(this)
                .parents('dl')
                .removeClass('ui-state-highlight');
        });

        $('#start-date').datepicker({ dateFormat: "dd-mm-yy" });
        $('#finish-date').datepicker({ dateFormat: "dd-mm-yy" });
        
        activeEmployee.init();
    });
